<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="http://www.51xuecheng.cn/static/img/asset-favicon.ico">
    <title>找回密码</title>
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/normalize-css/normalize.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/static/plugins/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="http://www.51xuecheng.cn/css/page-learing-student-register.css" />
   <style>
    .register-body .student {
  width: 450px;
  height: 455px;
  margin-top: -227px;
  margin-left: -200px;
}
   </style>
</head>

<body>
<!-- 页面头部 -->
<!--#include virtual="/include/header.html"-->
    <!-- 页面 -->
    <div class="register">

        <div id="findpasswordarea" class="register-body container text-center">
            <form class="form-horizontal required-validate" id="regStudentForm">
                <ul class="r-position student" >
                    <li>
                        <div class="page-header">
                            <h3>找回密码</h3>
                            填写手机号或电子邮箱找回密码，两个都填写优先使用手机找回
                        </div>
						
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">手机号码</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="cellphone" placeholder="请输入手机号码" v-model="formdata.cellphone">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">电子邮箱</label>
                            <div class="col-sm-9">
                                <input type="text" class="form-control" name="email" placeholder="请输入电子邮箱" v-model="formdata.email">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">验证码</label>
                            <div class="col-sm-9 verif">
                                <input type="text" class="form-control" name="checkcode" placeholder="请输入验证码" v-model="formdata.checkcode">
                                <button class="btn btn-default send" type="button" @click="sendcheckcode">发送验证码</button>
                                <span class="verif-span"></span>
                                <input type="hidden" class="form-control" name="checkcodekey" v-model="formdata.checkcodekey">
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" name="password" placeholder="请输入密码" v-model="formdata.password">
                                <span class="verif-span"></span>
                            </div>
                        </div>
                    </li>
                    <li>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">确认密码</label>
                            <div class="col-sm-9">
                                <input type="password" class="form-control" name="confirmpwd" placeholder="确认密码" v-model="formdata.confirmpwd">
                                <span class="verif-span"></span>
                            </div>
                    </li>

                    <li class="mag-left">
                        <button name="register" type="button" class="btn btn-primary" @click="findpasswordSubmit">找回密码</button>
                    </li>
                </ul>
            </form>
            </div>
            <div class="register-footer">
<!--底部版权-->
<!--#include virtual="/include/footer.html"-->

            </div>
        </div>
        <!-- 页面 css js -->
        <script type="text/javascript" src="/plugins/jquery/dist/jquery.js"></script>
        <script type="text/javascript" src="/plugins/bootstrap/dist/js/bootstrap.js"></script>
        <script src="/static/js/page-learing-student-register.js"></script>


  <script>
  /*手机验证码*/
  const getCheckCodeByCellphone = (cellphone) => {
      return  requestPostForm('/api/checkcode/phone?param1='+cellphone,{});
  }
  /*邮箱验证码*/
    const getCheckCodeByEmail = (email) => {
      return  requestPostForm('/api/checkcode/phone?param1='+email,{});
  }
  /*找回密码*/
    const findpasswordfun = (params) => {
      return  requestPost('/api/auth/findpassword',params);
  }
  var countdowntime=0;
            var findpasswordVm= new Vue({  
                   el: "#findpasswordarea", 
                   data: {
                     formdata:{
                         cellphone:'',
                         email:'',
                         checkcodekey:'',
                         checkcode:'',
                         confirmpwd:'',
                         password:''
                     }
       
                   },
                   methods: {
                    sendcheckcode(){
                        if(countdowntime>0){
                            return;
                        }
                        
                        if(this.formdata.cellphone){
                            //手机找回
                            getCheckCodeByCellphone(this.formdata.cellphone).then(res=>{
                                //倒计时
                                this.countdown()
                                if(res&&res.key){
                                    this.formdata.checkcodekey=res.key
                                    this.$message.success('向手机发送验证码成功，请查收')
                                }
                               
                            }).catch(error=>{
                                if(error&&error.response.data.errMessage){
                                    this.$message.error(error.response.data.errMessage)
                                }else{
                                    this.$message.error('出错了')
                                }
                               
                            })
                        }else if(this.formdata.email){
                           
                            //邮箱找回
                            getCheckCodeByEmail(this.formdata.email).then(res=>{
                                //倒计时
                                this.countdown()
                                if(res&&res.key){
                                    this.formdata.checkcodekey=res.key
                                    this.$message.success('向邮箱发送验证码成功，请查收')
                                }
                           }).catch(error=>{
                            if(error&&error.response.data.errMessage){
                                    this.$message.error(error.response.data.errMessage)
                                }else{
                                    this.$message.error('出错了')
                                }
                            })
                        }else{
                            this.$message.error('请填写手机号或电子邮箱地址')
                        }
                    },
                    countdown(){

                        countdowntime = 60;
                        var time = setInterval(function(){
                                $('.send').removeClass('btn-default').addClass('btn-success');
                                countdowntime--;
                                $('.send').text( countdowntime + '秒后重发');
                                if(countdowntime == 0){
                                    $('.send').removeClass('btn-success').addClass('btn-default')
                                    $('.send').text('发送验证码');
                                    clearInterval(time);
                                }
                            },1000)
                    },
                    findpasswordSubmit(){
                        findpasswordfun(this.formdata).then(res=>{

                        }).catch(error=>{

                        })
                    }
       
                   },
                   created() {
                    
                   },
                   mounted(){
                      
                   }
                 })
       </script>
</body>